<template>
  <div class="tabs">
    <el-tag
    v-for="(tag,index) in tags"
    :key="tag.name"
    size="small"
    :effect="$route.name===tag.name?'dark':'plain'"
    :closable="tag.name !== 'home'"
    @click="changeMenu(tag)"
    @close="handleClose(tag,index)"
    >{{tag.label}}</el-tag>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
    name:'commonTag',
    computed:{
        ...mapState({
            tags:state => state.tab.tabList
        })
    },
    methods:{
        ...mapMutations({
            close:'closeTag'
        }),
        changeMenu(item){
            this.$router.push({
                name:item.name
            })
        },
        handleClose(tag,index){
            const length = this.tags.length - 1;
            this.close(tag);
            if(index === length){
                this.$router.push({
                    name:this.tags[index-1].name
                })
            }else{
                this.$router.push({
                    name:this.tags[index].name
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.tabs{
    padding: 10px 20px;
    // background-color: #cbcaca;
    .el-tag{
        margin-right: 15px;
        cursor: pointer;
    }
}
</style>